<template>
  <div class="container">
    <div class="operate">
      <slot></slot>
      <div class="info" style="margin-left: auto">
        <div class="info-item" v-for="ele in flagList" :key="ele.value">
          <img
            style="display: block; margin-right: 5px"
            :src="ele.src"
            alt=""
          />
          <div style="white-space: nowrap">
            {{ ele.value }}
          </div>
        </div>
      </div>
      <slot name="op"></slot>
    </div>
    <div
      :style="{ maxHeight: item.h * 40 - 70 + 'px' }"
      class="content"
      v-if="!!item.data?.projectMilestoneVoList?.length"
    >
      <!-- 内容部分 -->
      <div class="steps">
        <el-steps :active="1" align-center>
          <el-step
            :key="ele.milestoneName"
            v-for="ele in item.data?.projectMilestoneVoList ?? []"
            :title="ele.milestoneName"
            :description="ele.createTime"
          >
            <template #icon>
              <img
                style="display: block; margin-right: 5px"
                :src="unFinish"
                alt=""
              />
            </template>
          </el-step>
        </el-steps>
      </div>
      <ListTable :options="tableOptions" :records="tableRecords" />
    </div>

    <NoData v-else />
  </div>
</template>

<script setup lang="ts">
  /**
   * @description 业务组件 -- 里程碑
   */
  import { ref } from "vue";
  const props = defineProps(["item"]);
  import { ListTable } from "@visactor/vue-vtable";
  import NoData from "./commonCom/NoData.vue";
  import unFinish from "@/assets/mileStone/unFinish.svg";
  import conduct from "@/assets/mileStone/conduct.svg";
  import overdue from "@/assets/mileStone/overdue.svg";
  import onTime from "@/assets/mileStone/onTime.svg";

  const flagList = ref([
    { value: "未完成", src: unFinish },
    { value: "进行中", src: conduct },
    { value: "逾期完成", src: overdue },
    { value: "按期完成", src: onTime },
  ]);

  const tableOptions = ref({
    columns: [
      { field: "milestoneName", title: "名称", width: "auto" },
      { field: "creator", title: "负责人", width: "auto" },
      { field: "state", title: "状态", width: "auto" },
      { field: "createTime", title: "计划完成时间", width: "auto" },
    ],
  });
  const tableRecords = ref(props.item.data?.projectMilestoneVoList);
</script>

<style scoped lang="scss">
  .container {
    box-sizing: border-box;
    height: 100%;
    font-size: 14px;
    color: #999;
    display: flex;
    flex-direction: column;
    padding: 0px 10px 10px;

    .content {
      flex: 1;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: auto;
      .steps {
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .operate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    .info-item {
      font-size: 12px;
      color: #5e5e5e;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin-right: 10px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }
</style>
